import {Component, ViewEncapsulation, Input, Inject, AfterContentInit} from '@angular/core';
import {ImageServeService} from "../../../service/image/image-serve.service";
import {DOCUMENT} from "@angular/platform-browser";
import {Router} from "@angular/router";

@Component({
  selector: 'seed-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {id: 'seed-lazyload-avatar'}
})

export class AvatarComponent implements AfterContentInit {
  public avatarIcon: string;
  public lazyloadImg: string;
  public scrollContainer: any;
  private _userId: string;

  @Input()
  get userId(): string {
    return this._userId;
  }

  set userId(value: string) {
    this._userId = value;
  }

  @Input()
  set avatar(icon: string) {
    this.avatarIcon = icon;
  }

  get avatar() {
    return this.avatarIcon;
  }

  @Input()
  set lazyLoadAvatar(src: string) {
    this.lazyloadImg = src;
  }

  get lazyLoadAvatar() {
    return this.lazyloadImg;
  }

  constructor(
    public router: Router,
    @Inject(DOCUMENT) private document,
    private imgService: ImageServeService
  ) {
    this.avatarIcon = this.lazyloadImg = this.imgService.getAvatarIcon();
  }

  goToHomepage() {
    if (this.userId) {
      this.router.navigate(['/', this.userId]);
    }
  }

  ngAfterContentInit() {
    this.scrollContainer = this.document.querySelector('#seed-scroll-content');
  }
}
